function createRenderer(optios) {
  const {createElement, setElementText, insert} = optios

  function mountElement(vnode, container) {
    const el = createElement(vnode.type)
    if (typeof vnode.children === 'string') {
      setElementText(el, vnode.children)
    }
    insert(el, container)
  }

  function patch(n1, n2, container) {
    if (!n1) {
      mountElement(n2, container) // 如果 n1 不存在意味挂载，调用 mountElement 完成
    } else {
      console.log('n1存在, 意味需要打补丁，暂时没做到')
    }
  }

  function render(vnode, container) {
    if (vnode) {
      patch(container._vnode, vnode, container) // 有新vnode，把新旧的一起传递patch函数，进行补丁
    } else {
      if (container._vnode) container.innerHTML = ''
    }
    container._vnode = vnode
  }
  return {render}
}

//封装 api，不会止步于 浏览器
const vnode = {type: 'h1', children: 'hello'}

const renderer2 = createRenderer({
  createElement(tag) {
    console.log(`创建元素 ${tag}`)
    return tag
  },
  setElementText(el, text) {
    console.log(`设置 ${JSON.stringify(el)} 的文本内容： ${text}`)
    el.text = text
  },
  insert(el, parent, _anchor = null) {
    console.log(`将 ${JSON.stringify(el)} 添加到 ${JSON.stringify(parent)} 下`)
    parent.children = el
  }
})
const container = {type: 'root'}
renderer2.render(vnode, container)

// log输出
// 创建元素 h1
// 设置 "h1" 的文本内容： hello
// 将 "h1" 添加到 {"type":"root"} 下
